<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>咨询</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <meta name="viewport"
          content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!--1.width=device-width    //应用程序的宽度和屏幕的宽度是一样的
2.height=device-height  //应用程序的高度和屏幕的高是一样的
3.initial-scale=1.0  //应用程序启动时候的缩放尺度（1.0表示不缩放）
4.minimum-scale=1.0  //用户可以缩放到的最小尺度（1.0表示不缩放）
5.maximum-scale=1.0  //用户可以放大到的最大尺度（1.0表示不缩放）
6.user-scalable=no  //用户是否可以通过他的手势来缩放整个应用程序，使应用程序的尺度发生一个改变（yes/no）
    -->
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="{{asset('zhuanjia/font-awesome-4.7.0/css/font-awesome.css')}}">
    <link rel="stylesheet" href="{{asset('zhuanjia/style/weui.min.css')}}"/>
    <link rel="stylesheet" href="{{asset('zhuanjia/style/style.css')}}"/>
</head>
<body style="background: #F5F5F5">
<!--<img src="images/59968281a8569e7ef42672c9bd1bc42.jpg" alt="">-->
<!--头部-->
<!-- <div class="search-box">
    <button class="btn fa fa-angle-left back-icon"></button>
    <span>咨询</span>
</div>  -->
<!--end 头部-->
<div class="banner"><img src="https://zixun.c-make.net/zhuanjia/images/topbanner.png" alt=""></div>
<!--主体-->
<form action="{{url('user/consult-save')}}" class="content-box" method="post" id="form1">
    <!--提示-->
    <h4 class="tip-warn">提示：您正在向【<span>{{object_get($expert,'user.truename')}}</span>】咨询，专家收到信息会尽快做出回复，请耐心等待。回复信息将通过微信公众号推送，请关注微信公众号：斯杩克</h4>
    <!--end提示-->
    
    
   
   

    <!--标题-->
    <div class="weui-cells__title title-consult">标题</div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" placeholder="请输入标题或关键字" name="title" required="" />
            </div>
        </div>
    </div>
    <!-- end 标题-->

    <!--问题描述-->
    <div class="weui-cells__title title-consult">问题描述</div>
    <div class="weui-cells weui-cells_form">
        <div class="weui-cell">
            <div class="weui-cell__bd">
                <textarea class="weui-textarea" placeholder="请详细描述问题，便于专家解答" rows="5" required="" name="contents"></textarea>
            </div>
        </div>
    </div>
    <!--问题描述-->
    <!--上传图片-->
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <div class="weui-uploader">
                <div class="weui-uploader__hd">
                    <p class="weui-uploader__title consult-left-title">图片上传:</p>
                    <div class="weui-uploader__info"><span id="uploadCount">0</span>/5</div>
                </div>
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">
                    </ul>
                    <div class="weui-uploader__input-box">
                        <input id="uploaderInput" class="weui-uploader__input" type="file"
                               accept="image/jpg,image/jpeg,image/png,image/gif" multiple="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-gallery" id="gallery">
        <span class="weui-gallery__img" id="galleryImg"></span>
        <div class="weui-gallery__opr">
            <a href="javascript:" class="weui-gallery__del">
                <i class="weui-icon-delete weui-icon_gallery-delete"></i>
            </a>
        </div>
    </div>
    <!--end上传图片-->

    <!--补充信息-->
    <div class="add-info">
        <h5 class="add-tip">为了更好地为您服务，请填写以下信息：</h5>
        <!--第一行-->
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">
                    <div class="weui-cells__title title-consult">姓名</div>
                    <div class="weui-cells">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="text" placeholder="请输入名字" name="truename" value="{{object_get($wxuser_info,'truename')}}"/>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="weui-flex__item">

                <div class="placeholder">
                    <div class="weui-cells__title title-consult">手机号</div>
                    <div class="weui-cells">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="text" placeholder="请输入手机号" name="mobile" value="{{object_get($wxuser_info,'mobile')}}" />
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!--第二行-->
        <div class="weui-flex">
            <div class="weui-flex__item">
                <div class="placeholder">
                    <div class="weui-cells__title title-consult">单位名称</div>
                    <div class="weui-cells">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="text" placeholder="请输入单位名称" value="{{object_get($wxuser_info,'danwei')}}" name="danwei"/>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="weui-flex__item">

                <div class="placeholder">
                    <div class="weui-cells__title title-consult">职位</div>
                    <div class="weui-cells">
                        <div class="weui-cell">
                            <div class="weui-cell__bd">
                                <input class="weui-input" type="text" placeholder="请输入职位" value="{{object_get($wxuser_info,'zhiwei')}}"  name="zhiwei"/>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        
        
    </div>
    <!-- end 补充信息-->
<div class="foot-btn-box" style="padding-bottom:15px;">
    <button type="button" class="weui-btn weui-btn_primary btn-sub" id="showIip">提交</button></div>

<input type="hidden" name="pics" id="pics" value=""/>
<input type="hidden" name="expert_id" value="{{$expert->id}}" />

{{csrf_field()}}
</form>
<!--主体-->
<!--提示弹框-->
<div class="js_dialog" id="Iip" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd">回复信息可在公众号查看，请关注公众号【斯杩克】。</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">确定</a>
        </div>
    </div>
</div>
<!-- /.提示弹框-->
<!--js-->
<script src="{{asset('zhuanjia/js/jquery-2.2.3.min.js')}}"></script>
<!--<script src="js/weui.min.js"></script>-->
<!--<script src="js/zepto.min.js"></script>-->
<script>
var thumbs = '';  
    //上传

    $(function () {
        /*提示弹框*/
        $('#showIip').on('click', function(){
            console.log('1215')
            $('#Iip').show();
            
        });
        $('.weui-dialog__btn').on('click', function(){
            $('#form1').submit();
            $('#Iip').fadeOut(600);
        });

        // 允许上传的图片类型
        var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];
        var maxSize = 1024 * 1024 * 10; // 10240KB，也就是 10MB
        var maxWidth = 1900;  // 图片最大宽度
        var maxCount = 5;// 最大上传图片数量

        //
        var tmpl = '<li class="weui-uploader__file" id="#ImgID#" style="background-image:url(#url#)">' +
            '</li>',
            $gallery = $("#gallery"),
            $galleryImg = $("#galleryImg"),
            $uploaderInput = $("#uploaderInput"),
            $uploaderFiles = $("#uploaderFiles");

        $uploaderInput.on("change", function (e) {
            files = e.target.files;
            // 如果没有选中文件，直接返回
            if (files.length === 0) {
                return;
            }
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];
                var imgID = genGUID();
                var reader = new FileReader();
                var fileType = file.type;
                // 如果类型不在允许的类型范围内
                if (allowTypes.indexOf(file.type) === -1) {

                    alert('该类型不允许上传' + fileType, "forbidden");
                    continue;
                }

                if (file.size > maxSize) {
                    alert("图片太大，不允许上传", "forbidden");
                    continue;
                }

                if ($('.weui-uploader__file').length >= maxCount) {
                    /*$('.weui-uploader__input-box').hide()*/
                    alert('最多只能上传' + maxCount + '张图片', "forbidden");
                    return;
                }


                reader.onload = function (e) {
                    var img = new Image();
                    img.onload = function () {
                        // 不要超出最大宽度
                        var w = Math.min(maxWidth, img.width);
                        // 高度按比例计算
                        var h = img.height * (w / img.width);
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 设置 canvas 的宽度和高度
                        canvas.width = w;
                        canvas.height = h;
                        ctx.drawImage(img, 0, 0, w, h);
                        var base64 = canvas.toDataURL(fileType, 0.6); //0.6指的是压缩60%

                        // 插入到预览区
                        $uploaderFiles.append($(tmpl.replace('#url#', base64).replace('#ImgID#', imgID)));

                        var num = $('.weui-uploader__file').length;
                        $('#uploadCount').text(num);

                        var url = "{{url('upload-base64')}}";
                        var data = {};
                        data.pic = base64;
                        data._token = "{{csrf_token()}}";
                        
                        
                        $.post(url,data,function(rs){
                            if(rs.status==true) {
                                thumbs = thumbs+rs.data+',';
                                $('#pics').val(thumbs); 
                            } else {
                                
                                return false;
                            }
                            console.info(thumbs);
                            
                        })

                        // 模拟上传进度
                        /* var progress = 0;
                         function uploading() {
                             $uploaderFiles.find('.weui_uploader_status_content').text(++progress + '%');
                             if (progress < 100) {
                                 setTimeout(uploading, 30);
                             } else {
                                 $uploaderFiles.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();//清除上传进度图标
                             }
                         }
                         setTimeout(uploading, 30);*/
                    };

                    img.src = e.target.result;


                    //这里实现上传
                    //$.ajax({});


                };
                reader.readAsDataURL(file);

            }
        });


        var index; //第几张图片
        $uploaderFiles.on("click", "li", function () {
            index = $(this).index();
            $galleryImg.attr("style", this.getAttribute("style"));
            $gallery.fadeIn(100);
        });
        $gallery.on("click", function () {
            $gallery.fadeOut(100);
        });

        //删除图片
        $(".weui-gallery__del").click(function () {
            $uploaderFiles.find("li").eq(index).remove();
            var num = $('.weui-uploader__file').length;
            $('#uploadCount').text(num);
        });


        $("#btnsaveCharge").click(function () {


            //或者在这里实现批量上传, 不建议批量上传
        });

    });

    //生成guid
    function genGUID() {
        var G1 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        var G2 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1) + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        return (G1 + G2);
    }

</script>
</body>
</html>